<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		.text {
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			width: 600px;
		}

		button {
			outline: 0;
			border: 0;
			background-color: transparent;
		}

		div {
			margin-bottom: 50px;
		}

		.btn {
			clear: both;
			float: right;
			font-size: 16px;
			padding: 0 8px;
			background: #3f51b5;
			line-height: 24px;
			height: 24px;
			border-radius: 4px;
			color: #fff;
			cursor: pointer;
		}

		.btn1 {
			float: left;
		}

		.text1::before {
			content: '';
			float: right;
			width: 0;
			height: 40px;
		}

		.text2::before {
			content: '';
			float: right;
			width: 0;
			/* height: calc(100% - 24px); */
			/*  calc 计算，用整个容器高度减去按钮的高度即可 */

			height: 100%;
			margin-bottom: -24px;
		}

		.wrap {
			display: flex;
		}
	</style>
	<body>
		<div class="text">
			<button class="btn">展开</button>
			汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
			这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
			为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
			每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
			至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈！
		</div>
		<div class="text">
			<button class="btn1 btn">展开</button>
			汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
			这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
			为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
			每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
			至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈！
		</div>

		<div class="text text1">
			<button class="btn">展开</button>
			汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
			这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
			为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
			每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
			至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈！
		</div>
		<div class="text text1">
			<button class="btn1 btn">展开</button>
			汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
			这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
			为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
			每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
			至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈！
		</div>

		<div class="text text2">
			<button class="btn1 btn">展开</button>
			汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
			这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
			为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
			每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
			至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈！
		</div>


		<div class="wrap">
			<div class="text text1">
				<button class="btn ">这是一个占位</button>
				汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
				这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
				为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
				每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
				至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈！
			</div>
		</div>


	</body>
</html>
